<template>
  <view class="page">
    <nav-bar :page-title="lang.pageName"/>

    <view :class="['padding-20', locale]">
      <!-- Avatar Section -->
      <view class="center padding-tb">
        <view class="column-center relative-position">
          <button class="service" open-type="chooseAvatar" @chooseavatar="chooseAvatar"/>
          <view class="avatar-wrapper">
            <image class="avatar" :src="form.avatarUrl || userInfo.avatarUrl"/>
            <view class="center camera-icon">
              <u-icon name="camera" color="#FFFFFF" size="24"/>
            </view>
          </view>
          <view class="hint-text">{{ lang.changeAvatar }}</view>
        </view>
      </view>

      <!-- Form Section -->
      <view class="card column padding-30 margin-top-40 form-section">
        <view class="label">{{ lang.nickname }}</view>
        <input
            :placeholder="lang.enterNickname" class="input"
            v-model="form.nickname" type="nickname"
            placeholder-class="placeholder"
        />
      </view>

      <!-- Save Button -->
      <button class="save-button" @click="handleSubmit">{{ lang.save }}</button>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from 'vue'
import {mapState} from 'vuex'
import tips from '@/utils/tips'
import NavBar from "@/components/nav-bar/nav-bar.vue";

export default Vue.extend({
  components: {NavBar},

  data() {
    return {
      form: {
        nickname: '',
        avatarUrl: ''
      }
    }
  },

  computed: {
    ...mapState(['userInfo']),
    lang(): any {
      return this.$t('editUserInfo')
    }
  },

  onLoad() {
    this.form = this.userInfo
  },

  methods: {
    // 选择头像
    chooseAvatar(e: any) {
      this.form.avatarUrl = e.detail.avatarUrl
    },

    async handleSubmit() {
      if (!this.form.nickname.trim()) {
        tips.toast(this.lang.nicknameRequired)
        return;
      }
      console.log(this.form)

      uni.showLoading({title: this.lang.saving})

      try {
        // ئۆزگەرتىش API نى بۇ يەردە قوشۇڭ
        // مەسىلەن:
        // await updateProfileAPI({
        //   nickname: this.form.nickname,
        //   avatarUrl: this.form.avatarUrl
        // })

        // ئىشلەتكۈچى ئۇچۇرىنى يېڭىلاش
        this.$store.commit('updateUserInfo', {
          nickname: this.form.nickname,
          avatarUrl: this.form.avatarUrl
        })

        uni.navigateBack()
        tips.toast(this.lang.saveSuccess)
      } catch (error) {
        tips.toast(this.lang.saveFailed)
      } finally {
        uni.hideLoading()
      }
    }
  }
})
</script>

<style lang="scss">
.page {
  min-height: 90vh;
}

.avatar-wrapper {
  position: relative;
  padding: 0;
  width: 180rpx;
  height: 180rpx;
  background: none;

  &::after {
    border: none;
  }

  .avatar {
    width: 180rpx;
    height: 180rpx;
    border-radius: 90rpx;
    background-color: #E5E5EA;
  }

  .camera-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 56rpx;
    height: 56rpx;
    border-radius: 28rpx;
    background: #007AFF;
  }
}

.hint-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #8E8E93;
}


.form-section {

  .label {
    background: none;
    font-size: 30rpx;
    font-weight: 500;
    color: #000000;
    margin-bottom: 16rpx;
    display: block;
  }

  .input {
    height: 88rpx;
    background: #F2F2F7;
    border-radius: 12rpx;
    padding: 0 24rpx;
    font-size: 32rpx;
    color: #000000;
  }

  .placeholder {
    color: #8E8E93;
  }
}

.save-button {
  margin: 48rpx 32rpx;
  height: 96rpx;
  line-height: 96rpx;
  background: #007AFF;
  border-radius: 48rpx;
  color: #FFFFFF;
  font-size: 34rpx;
  font-weight: 500;

  &:active {
    opacity: 0.8;
  }
}
</style>
